<template>
  <div class="goumai">
    <van-nav-bar
      title="商品信息"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list.gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 3个快速 -->
    <div class="fjyyyds">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <!-- 商品名称，价格 -->
    <div class="hsayyds">
      <div class="c">
        <h1>{{ list.info && list.info.name }}</h1>
        <p>{{ list.info && list.info.goods_brief }}</p>
        <span>￥{{ list.info && list.info.retail_price }}</span>
      </div>
    </div>
    <!-- 购买规模 -->
    <div class="bsyyds">
      <div class="hs">请选择规模数量</div>
      <div class="bs">
        <van-icon size="20" color="#999" name="arrow" />
      </div>
    </div>
    <!-- 商品参数 -->
    <div class="hsyyds">
      <div class="a">商品参数</div>
      <div class="b" v-for="item in list.attribute" :key="item.index">
        <div class="c">{{ item.name }} ：</div>
        <div class="d">{{ item.value }}</div>
      </div>
    </div>
    <!-- 商品大图展示 -->
    <div class="asyyds" v-html="list.info && list.info.goods_desc"></div>
    <!-- 底部收藏购买 -->
    <div class="shoucang">
      <van-icon
        class="huangying"
        :color="list.collected ? 'red' : ''"
        size="20"
        name="star-o"
        @click="baobei"
      />
      <van-icon
        :badge="list.allnumber"
        class="huangying"
        size="20"
        name="cart-o"
      />
      <van-button class="huangying" type="default">立即购买</van-button>
      <van-button class="huangying" type="default" color="red" @click="jrCart"
        >加入购物车</van-button
      >
    </div>

    <!-- 加入购物车的弹出层 -->
    <van-popup class="ysyyds" v-model="show" position="bottom">
      <div class="sisui" v-if="list.info">
        <div class="lsyyds">
          <div class="a">
            <img :src="list.info.primary_pic_url" alt="" />
          </div>
          <div class="b">
            <h2>价格：￥{{ list.info.retail_price }}</h2>
            <p>清空选择数量</p>
          </div>
        </div>
        <van-stepper v-model="num" />
      </div>
    </van-popup>
    <!-- 立即购买弹出层 -->
  </div>
</template>

<script>
import { Toast } from "vant";

import { detailaction } from "@/api/购买/goumai.js";
import { addCart } from "@/api/加入购物车/maimaimai.js";
import { addcollect } from "@/api/收藏/baobei.js";
export default {
  name: "GouMai",
  data() {
    return {
      list: [],
      show: false,
      num: 1,
    };
  },
  methods: {
    initList() {
      detailaction({
        params: {
          id: this.$route.query.id,
          openId: localStorage.getItem("openId"),
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    // 收藏的方法
    baobei() {
      addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          Toast.success("收藏成功");
        } else {
          Toast.fail("收藏失败");
        }
        this.initList();
      });
    },
    // 加入购物车
    jrCart() {
      // 把弹出层显示
      // Toast.loading({
      //   message: "加入中...",
      //   forbidClick: true,
      //   // duration: 0,
      // });
      if (this.show) {
        addCart({
          goodsId: this.$route.query.id,
          number: this.num,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          console.log(res);
          if (res.status == 200) {
            Toast.success("添加成功");
          } else {
            Toast.fail("添加失败");
          }
          this.initList();
        });
      } else {
        this.show = true;
      }
    },
  },
  created() {
    console.log(this.$route.query.id);
    this.initList();
  },
};
</script>

<style lang="less" scoped>
.goumai {
  width: 100%;
  margin-bottom: 60px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 375px;
    text-align: center;
    margin-top: 50px;
    background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 3个快速
  .fjyyyds {
    height: 36px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    div {
      height: 100%;
      line-height: 36px;
      color: rgb(139, 145, 145);
    }
  }
  // 商品名称，价格
  .hsayyds {
    width: 10rem;
    height: 4.08rem;
    background: #fff;
    margin: 0 auto;
    border-bottom: 0.01333rem solid #f4f4f4;
    .c {
      text-align: center;
      h1 {
        line-height: 47px;
        padding: 20px 0;
      }
      p {
        font-size: 12px;
        line-height: 16px;
        padding: 8px 0 12px 0;
        color: #999;
      }
      span {
        font-size: 20px;
        line-height: 24px;
        color: red;
      }
    }
  }
  // 购买规模
  .bsyyds {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    margin: 0 auto 8px;
    height: 54px;
    font-size: 12px;
  }
  // 商品参数
  .hsyyds {
    width: 100%;
    height: 259px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .a {
      line-height: 45px;
      font-size: 20px;
    }
    ::v-deep.goumai .hsyyds .c[data-v-382e4b52] {
      text-align: unset;
    }
    .b {
      width: 80%;
      margin: 10px;
      padding: 10px 0;
      box-sizing: border-box;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .c {
        text-align: unset;

        width: 35%;
        color: #999;
      }
      .d {
        width: 100%;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  // 商品大图展示
  .asyyds {
    width: 100%;
    ::v-deep img {
      width: 100%;
    }
  }
  // 底部收藏和购买
  .shoucang {
    background-color: #00f7ff;
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    .huangying {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 50px;
      border-right: 1px solid #555;
    }
    .van-info {
      // top: 15px;
      // left: 30px;
      // z-index: 500;
      height: 0.37333rem;
      // width: 0.37333rem;
      z-index: 10;
      position: absolute;
      top: 15px;
      right: 30px;
      background: #b4282d;
      text-align: center;
      font-size: 0.24rem;
      color: #fff;
      line-height: 0.37333rem;
      border-radius: 50%;
    }
  }
  // 加入购物车弹出层
  .ysyyds {
    .sisui {
      height: 200px;
      padding: 20px;
      .lsyyds {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        .a {
          width: 89px;
          height: 89px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .b {
          h2 {
            color: red;
            margin: 5px 0;
          }
          p {
            color: #999;
            margin: 10px 0;
          }
        }
      }
    }
  }
}
</style>